<template>
	<view class="account-body">
    <u-toast ref="uToast" />
    <view class="account-header">
      <view class="account-header_logo">
        <u-image width="300rpx" height="300rpx" src="/static/image/logo/logo_oa_primary.png"></u-image>
      </view>
      <h2 class="register-body-form_title">演示仿钉钉流管理小程序</h2>
    </view>
		<view class="register-body-form">
<!--      <h2 class="register-body-form_title">账号密码登录</h2>-->
      <u-form :model="form" ref="form1" :label-width="120">
        <u-form-item label="账号" prop="username"><u-input v-model="form.username" placeholder="请输入登录账号" /></u-form-item>
        <u-form-item label="密码" prop="password"><u-input v-model="form.password" placeholder="请输入登录密码" type="password"/></u-form-item>
        <u-form-item label="验证码" prop="code">
          <view style="display: flex;">
            <view style="width: 240rpx">
              <u-input v-model="form.code" placeholder="验证码"/>
            </view>
            <view style="width: 240rpx; margin-left: 10rpx">
              <u-image width="100%" height="80rpx" :src="codeUrl" @click="getCodeUrl"></u-image>
            </view>
          </view>
        </u-form-item>

        <u-button type="primary" class="register-body-form_btn_login" @click="login">登录</u-button>

        <view class="login-body_form_login_we">
          <navigator url="/pages/login/index" open-type="redirect">使用微信授权登录</navigator>
        </view>
      </u-form>
    </view>
	</view>
</template>

<script>
import { captchaImage, accountLogin, getInfo } from '@/api/api-user.js'
export default {
  data() {
    return {
      codeUrl: '',
      form: {
        username: 'lr1',
        password: '123456',
        code: undefined,
        uuid: undefined,
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: ['change', 'blur'] }
        ],
        password: [
          { required: true, message: '请选择密码', trigger: ['change', 'blur'] }
        ],
        code: [
          { required: true, message: '请选择验证码', trigger: ['blur'] }
        ]
      }
    }
  },
  methods: {
    getCodeUrl() {
      let that = this
      captchaImage().then((data) => {
        console.log(data)
        that.form.uuid = data.uuid
        that.codeUrl = "data:image/gif;base64," + data.img;
      })
    },
    login() {
      this.$refs.form1.validate((valid) => {
        console.log(valid);
        if (valid) {
          // uni.showToast({
          //   icon: "none",
          //   title: "表单验证通过"
          // })

          accountLogin(this.form).then((data) => {
            console.log(data)
            if (data.code === 200) {
              uni.setStorageSync('foa-user-token', data.token);
              this.$refs.uToast.show({
                title: '登录成功',
                type: 'success'
              })

              // 从本地缓存中取出token
              this.$store.state.user.token = uni.getStorageSync('foa-user-token')
              // 获取用户信息
              getInfo().then(data => {
                console.log(data)
                let user = data.user
                this.$store.state.user.username = user.userName
                this.$store.state.user.userId = user.userId
                this.$store.state.user.email = user.email
                this.$store.state.user.avatar = user.avatar
                this.$store.state.user.deptId = user.deptId
                this.$store.state.user.nickName = user.nickName
                this.$store.state.user.roles = user.roles
                this.$store.state.user.permissions = data.permissions
              })

              setTimeout(function () {
                uni.switchTab({
                  url: '/pages/dashboard/index'
                });
              }, 1000)
            } else {
              this.$refs.uToast.show({
                title: '登录失败',
                type: 'error'
              })
            }
          })
        }
      })
    }
  },
  onReady() {
    this.$refs.form1.setRules(this.rules);
  },
  onLoad() {
    this.getCodeUrl()

  },
}
</script>

<style lang="scss" scoped>
  .account-body {
    //background-color: #3e85ff;
    height: 100vh;
    overflow: scroll;

    //flex: auto;
    //display: flex;
    //flex-direction: column;
    //justify-content: center;
    //align-items: center;

    .register-body-form {
      //background-color: #ffffff;
      border-radius: 5rpx;
      height: 800rpx;
      width: 650rpx;
      //background-color: white;
      margin: 0 auto;
      padding: 10rpx;
    }
  }
  .register-body-form_title {
    text-align: center;
    color: #2C405A;
    margin-bottom: 20rpx;
  }
  .register-body-form_btn_login {
    margin-top: 20rpx;
  }

  .account-header {
    height: 30vh;
    margin-top: 250rpx;
    .account-header_logo {
      width: 300rpx;
      margin: 0 auto;
    }
  }

  .login-body_form_login_we {
    text-align: center;
    margin-top: 20rpx;
    color: #2C405A;
  }
</style>
